<template>
	<view class="login-wrap">
		<image class="bgc" mode="aspectFill" src="/static/images/login/login-bgc.png"></image>
		<view class="login-box">
			<view class="login">
				<view class="title">登录</view>
				<view class="input-wrap" v-for="(item,key) in list" :key="key">
					<image class="icon" :src="listInfo[key].img"></image>
					<input v-if="key==='accountCode'" v-model="list[key]" type="text" :placeholder="listInfo[key].placeholder">
					<input v-else v-model="list[key]" type="password" :placeholder="listInfo[key].placeholder">
				</view>
				<view class="btn-wrap">
					<common-button :btn-title="btntitle" @submit="handleLogin"></common-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import commonButton from '../../components/button'
import {login} from '../../api/login'
import {validityPhone} from '../../utils/index'

	export default {
		name: 'logon',
		components:{
			commonButton
		},
		data() {
			return {
				btntitle: '登录',
				list: {
					accountCode: '13374862631',
					userPwd: '123123'
				},
				listInfo: {
					accountCode: {
						placeholder:'请输入用户手机号',
						img: '/static/images/login/user.png'
					},
					userPwd:{
						placeholder:'请输入密码',
						img: '/static/images/login/password.png'
					}
				}
			}
		},
		methods: {
			async handleLogin() {
				const {accountCode, userPwd} = this.list
				const flag = this.validity()
				if(flag) {
					uni.showLoading({
						title: '登录中...',
					})
					try{
						const res = await login({accountCode, userPwd})
						uni.showToast({
							title: '登录成功'
						})
						uni.setStorageSync('USER_INFO',JSON.stringify(res))
						this.$register()
						uni.navigateTo({
							url: '/pages/index/index'
						})
					}catch(e){
						console.log(e)
						//TODO handle the exception
					}
				}
			},
			validity() {
				const {accountCode, userPwd} = this.list
				if(!validityPhone(accountCode)) {
					uni.showToast({
						icon: 'none',
						title: '用户名格式不正确'
					})
					return false
				}
				if(userPwd === '') {
					uni.showToast({
						icon: 'none',
						title: '密码不能为空'
					})
					return false
				}
				return true
			}
		}
	}
</script>

<style lang="scss">
.login-wrap{
	width: 100%;
	height: 100vh;
	position: relative;
	.bgc{
		width: 100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
	}
	.login-box{
		width: 100%;
		position: absolute;
		top: 233upx;
		left: 0;
		padding: 0 36upx;
		box-sizing: border-box;
		.login{
			background:rgba(255,255,255,1);
			border-radius:10upx;
			width: 100%;
			padding: 42upx 30upx 135upx;
			box-sizing: border-box;
			.title{
				font-size:50upx;
				font-weight:bold;
				color:rgba(51,51,51,1);
				line-height:86upx;
			}
			.input-wrap{
				width: 100%;
				height: 136upx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #e1e1e1;
				box-sizing: border-box;
				.icon{
					width: 40upx;
					height: 40upx;
					margin-right: 20upx;
				}
				input{
					flex: 1;
					padding-right: 10upx;
					box-sizing: border-box;
					border:none;
					height: 100%;
					font-size: 30upx;
					color: #333;
				}
			}
			.btn-wrap{
				width: 100%;
				padding-top: 58upx;
				box-sizing: border-box;
			}
		}
	}
}
</style>
